<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #outer {
            width: 520px;
            height: 333px;
            margin: 50px auto;
            background-color: yellowgreen;
            padding: 10px 0;
            /*overflow: hidden;*/
            position: relative;
        }
        #imglist {
            list-style: none;
            left: 0px;
           /* width: 2600px;*/
            position: absolute;

        }
        #imglist li {
            float: left;
            margin: 0 10px;
        }
        img {
            width: 500px;
            height: 333px;
        }
        #nav {
            position: absolute;
            bottom: 15px;
            left: 197px;
        }
        #nav a {
            float: left;
            width: 15px;
            height: 15px;
            margin: 0 5px;
            background-color: red;
            opacity: 0.5;
        }
        #nav a:hover {
            background-color: black;
        }
    </style>
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
        window.onload = () => {
            let imglist = document.getElementById("imglist");
            console.log(imglist)
            let imgs = imglist.getElementsByTagName("img");
            imglist.style.width = imgs.length * 520 + "px";
            let nav = document.getElementById("nav");
            let outer = document.getElementById("outer");
            nav.style.left =  outer.offsetWidth / 2 - nav.offsetWidth / 2 + "px";
            let index = 0;
            let alist = nav.getElementsByTagName("a");
            alist[0].style.backgroundColor = "black";

            nav.onclick = function(e){
                e = e || window.event;
                for(let i = 0; i < alist.length; i++){
                    if(alist[i] == e.target){
                       clearInterval(imglist.timer2);
                       console.log("i = " + i);
                       index = i;
                       alist[index].style.backgroundColor = "black";
                       moveTo(imglist, "left", -520 * index, 50);
                       
                       imglist.timer2 = setInterval(() => {
                        index = (++index)%imgs.length;
                        restoreA();
                        alist[index].style.backgroundColor = "black";
                        moveTo(imglist, "left", -520 * index, 50);
                    }, 5000);
                    }else{
                        alist[i].style.backgroundColor = "";
                    }
                }
                
            }


            function restoreA(){
                

                for(let i = 0; i < alist.length; i++){
                    alist[i].style.backgroundColor = "";
                }
                if(index == imgs.length - 1){
                    index = 0;
                    alist[index].style.backgroundColor = "black";
                    imglist.style.left = 0;
                }
            }  
            
            imglist.timer2 = setInterval(() => {
                index = (++index)%imgs.length;
                restoreA();
                alist[index].style.backgroundColor = "black";
                moveTo(imglist, "left", -520 * index, 50);
            }, 5000);
         

    

        }
        

    </script>
</head>
<body>
    <div id="outer">
        <ul id="imglist">
            <li>
                <!-- 设置图片展示大小 -->
                 <img src="imgs/1.png" alt="1" ></img>
            </li>
            <li>
                <img src="imgs/2.png" alt="2" ></img>           
            <li>
                <img src="imgs/3.jpg" alt="3" ></img>      
            </li>
            <li>
                <img src="imgs/4.png" alt="4" ></img>      
            </li>
            <li>
                <img src="imgs/5.jpg" alt="5" ></img>      
            </li>
            <li>
                <img src="imgs/5.jpg" alt="1" ></img>      
            </li>
        </ul>
        <div id="nav">
            <a href="javascript:;" title="img1"></a>
            <a href="javascript:;" title="img2"></a>
            <a href="javascript:;" title="img3"></a>
            <a href="javascript:;" title="img4"></a>
            <a href="javascript:;" title="img5"></a>
        </div>
    </div>
</body>
</html>